<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <input type="file"><input type="range" min=-50 max=50 value=0><br><br><img>
    <script src="../build/aurora.js"></script>
    <script>
        var player = null;
        document.querySelector("input[type=range]").oninput = function(e) {
            if(!player) return;
            
            player.pan = +e.target.value;
        }
        
        document.querySelector("input").onchange = function(e) {
            if (player) player.stop();
            
            player = AV.Player.fromFile(e.target.files[0]);
            player.on('error', function(e) { throw e });
            
            console.log(player)
            
            player.on('metadata', function(data) {
                console.log(data);
                
                // Show the album art
                if (data.coverArt)
                    document.querySelector("img").src = data.coverArt.toBlobURL();
            });
            
            player.play();
        }
    </script>
</body>
</html>